<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			站长管理
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-nurse-fill" style="color:#999;font-size:16px;"></i>
				<!-- <i-icon size="30upx" color="#999" name="nurse-fill"></i-icon> -->
				站长管理
			</view>
			<view class="r30">
				<button @click="addNode()">
					<i class="ri-add-circle-fill" style="color:#fff;font-size:12px;"></i>
					<!-- <i-icon size="20upx" color="#FFF" name="add-circle-fill"></i-icon> -->
					添加站长
				</button>
			</view>
		</view>
			<view class="p-table" >
			<table class="pure-table pure-table-horizontal">
				<tr>
					<th>编号</th>
					<th>手机号</th>
					<th>姓名</th>
					<th>所属站点</th>
					<th>创建时间</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in agentList">
					<td>
						<text>{{item.id}}</text>
					</td>
					<td>
						<text>{{item.agentPhone}}</text>
					</td>
					<td>
						<text>{{item.agentName}}</text>
					</td>
					<td>{{item.stationName}}</td>
					<td>{{item.createDatetime}}</td>
					<td class="bz">
						<button @click="tcEdit(item)" class="r10">
							<i class="ri-pencil-fill" style="color:#fff;"></i>
							<!-- <i-icon size="20upx" color="#FFF" name="pencil-fill"></i-icon> -->
							编辑
						</button>
						<button class="b-dell" @click="delNode(item)">
							<i class="ri-delete-bin-line" style="color:#333;"></i>
							<!-- <i-icon size="20upx" color="#333" name="delete-bin-line"></i-icon> -->
							删除
						</button>
					</td>
				</tr>
				<tr v-if="agentList.length===0">
					<td colspan="5" style="text-align: center;color:#9c9c9c; ">数据为空</td>
				</tr>
			</table>
			<view class="bz">
				<Pagination :total="total" :pageSize="size" :nowPage="current" @change="alterCurrent">
				</Pagination>
			</view>
		</view>
		<view v-if="add" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk" style="width: 600px;">
				<view class="tb">
					<view class="titem">
						<i class="ri-add-circle-fill" style="color:#008040;font-size:12px;"></i>
						<!-- <i-icon size="20upx" color="#008040" name="add-circle-fill" class="r10"></i-icon> -->
						添加站长
					</view>
					<i class="ri-close-circle-fill" style="color:#f73164;font-size:16px;" @click="add=false"></i>
					<!-- <i-icon size="30upx" color="#f73164" name="close-circle-fill" @click="add=false"></i-icon> -->
				</view>
				<view class="com">
					<view class="li bc">
						<view class="wz" style="width: 100px;">姓名</view>
						<view class="nr"><input type="text" v-model="node.agentName" placeholder="姓名" /></view>
					</view>
					<view class="li bc">
						<view class="wz" style="width: 100px;">手机号</view>
						<view class="nr"><input type="text" v-model="node.agentPhone" placeholder="站长手机号"
								maxlength="11" /></view>
					</view>
					<view class="li bc">
						<view class="wz" style="width: 100px;">站点</view>
						<view class="nr">
							<text>{{node.stationName}}</text>
							<text @click="stationSearch.show=true;"
								style="margin-left:30rpx;background-color:#008040;color:#fff;">选择</text>
						</view>
						<view v-if="stationSearch.show"
							style="display:block;position:absolute;line-height:30rpx;border:1px solid #CCCCCC;border-radius:6rpx;background-color:#FFFFFF;z-index:1;transform:translate(240rpx,50%);">
							<view class="p-line">
								<input type="text" v-model="stationSearch.keyword" placeholder="输入站点id或站点名称"
									class="p-ipt" />
								<text class="p-btn" @click="getStationList()">搜索</text>
								<text class="p-btn" style="background-color:#C0C4CC;"
									@click="stationSearch.show=false;">关闭</text>
							</view>
							<view class="">
								<table class="p-table">
									<tr>
										<th>编号</th>
										<th>名称</th>
										<th>操作</th>
									</tr>
									<tr v-for="(item,index) in stationList">
										<td>{{item.id}}</td>
										<td>{{item.villageName}}</td>
										<td><text class="p-btn"
												@click="node.stationId=item.id;node.stationName=item.villageName;stationSearch.show=false;">选择</text>
										</td>
									</tr>
								</table>
							</view>
							<view class="">
								<text v-if="stationSearch.current>1" class="p-btn"
									@click="stationSearch.current+1;getStationList();">上一页</text>
								<text v-if="stationSearch.current<stationSearch.pages" class="p-btn"
									@click="stationSearch.current-1;getStationList();">下一页</text>
							</view>
						</view>
					</view>
					<view class="bc" style="margin-left: 120px;margin-top: 15px;">
						<button type="button" @click="addNode(true)" style="width: 100px;">
							<i class="ri-arrow-right-s-line" style="color:#fff;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
							确定
						</button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="bianji" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk" style="width: 600px;">
				<view class="tb">
					<view class="titem">
						<i class="ri-add-circle-fill" style="color:#008040;font-size:12px;"></i>
						<!-- <i-icon size="20upx" color="#008040" name="add-circle-fill" class="r10"></i-icon> -->
						编辑站长
					</view>
					<i class="ri-close-circle-fill" style="color:#f73164;font-size:18px;" @click="bianji=false"></i>
					<!-- <i-icon size="30upx" color="#f73164" name="close-circle-fill" @click="bianji=false"></i-icon> -->
				</view>
				<view class="com">
					<view class="li bc">
						<view class="wz" style="width: 100px;">姓名</view>
						<view class="nr"><input type="text" v-model="node.agentName" placeholder="姓名" /></view>
					</view>
					<view class="li bc">
						<view class="wz" style="width: 100px;">手机号</view>
						<view class="nr"><input type="text" v-model="node.agentPhone" placeholder="站长手机号"
								maxlength="11" /></view>
					</view>
					<!-- <view class="li bc">
						<view class="wz" style="width: 100px;">站点</view>
						<table class="p-table">
							<tr>
								<th>编号</th>
								<th>名称</th>
								<th>操作</th>
							</tr>
							<tr v-for="(item,index) in stationList">
								<td>{{item.id}}</td>
								<td>{{item.villageName}}</td>
								<td><text class="p-btn"
										@click="node.stationId=item.id;node.stationName=item.villageName;stationSearch.show=false;">选择</text>
								</td>
							</tr>
						</table>
					</view> -->
					<view class="bc" style="margin-left: 120px;margin-top: 15px;">
						<button type="button" @click="editNode(true)" style="width: 100px;">
							<i class="ri-arrow-right-s-line" style="color:#fff;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
							确定
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	let that;
	import Pagination from "@/components/pagination.vue"
	export default {
		components: {
			Pagination
		},
		data() {
			return {
				bianji: false,
				agentList: [],
				current: 1,
				size: 6,
				pages: 0,
				total: 0,
				node: {},
				add: false,
				edit: false,
				//唯一站点列表
				stationList: [],
				stationSearch: {
					show: false,
					current: 1,
					size: 10,
					pages: 0,
					total: 0,
					keyword: ''
				}
			}
		},
		methods: {
			alterCurrent: function(c) {
				if (c) {
					if (c <= this.pages && c >= 1) {
						this.current = c;
						this.getAgentList()
					}
				}
			},
			// 获取站长列表
			getAgentList: function() {
				let _this = this;
				let params = '?current=' + that.current + '&size=' + that.size;
				uni.request({
					url: this.baseURL + '/agent/list' + params,
					method: 'GET',
					header: {
						token: uni.getStorageSync('token')
					},
					success: function(res) {
						let data = res.data;
						if (data.code == 0) {
							data = data.data;
							_this.agentList = data.records
							_this.pages = parseInt(data.pages)
							_this.total = parseInt(data.total)
							_this.current = parseInt(data.current)
							_this.size = parseInt(data.size)
						} else {
							uni.showToast({
								title: data.msg || data.message,
								icon: 'error',
								duration: 3000
							})
						}
					}
				});
			},
			//添加站长
			addNode: function(_add) {
				let _this = this;
				if (!(_add === true)) {
					this.node = {
						agentName: '',
						agentPhone: '',
						stationId: '',
						stationName: ''
					};
					this.add = true
					return
				}
				let msg = '';
				if (!this.node.agentName) {
					//站长名称不能为空
					msg = '站长名称不能为空'
				} else if (!this.node.agentPhone) {
					//手机号不能为空
					msg = '手机号不能为空'
				}
				if (msg) {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
					return
				}
				uni.showLoading({
					mask: true
				})
				uni.request({
					url: this.baseURL + '/agent/add',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					data: {
						'agentName': this.node.agentName,
						'agentPhone': this.node.agentPhone,
						'stationId': this.node.stationId || ''
					},
					success(res) {
						uni.hideLoading()
						let data = res.data
						console.log(data)
						if (data.code == 0) {
							uni.showToast({
								title: '添加成功',
								icon: 'success',
								duration: 2000
							})
							_this.add = false;
							_this.getAgentList()
						} else {
							uni.showToast({
								title: data.msg || data.message,
								icon: 'error',
								duration: 3000
							})
						}
					},
					complete() {}
				})
			},
			tcEdit(item) {
				this.bianji = true;
				this.node = item;
			},
			//编辑站长
			editNode: function() {

				let _this = this;
				uni.request({
					url: this.baseURL + '/agent/update',
					method: 'PUT',
					header: {
						token: uni.getStorageSync('token')
					},
					data: this.node,
					success: function(res) {
						//console.log(res)
						let data = res.data
						if (data.success == true) {
							_this.bianji = false;
							uni.showToast({
								title: '修改成功',
								duration: 3000
							})
							_this.getAgentList()
						} else {
							uni.showToast({
								title: data.msg || data.message,
								icon: 'error',
								duration: 3000
							})
						}
					}
				})
			},
			delNode: function(item) {
				let _this = this;
				uni.showModal({
					content: '确认要删除\"' + item.name + '\"节点吗？',
					success: function(res) {
						if (res.confirm) {
							//相关删除操作
							uni.request({
								url: _this.baseURL + '/agent/del?agentId=' + item.agentId,
								method: 'DELETE',
								data: {
									agentId: item.agentId
								},
								success: function(res) {
									let data = res.data
									if (data.code === 0 || data.success == true) {
										_this.getAgentList()
									} else {
										uni.showToast({
											title: data.msg || data.message,
											icon: 'error',
											duration: 3000
										})
									}
								}
							})
						}
					}
				})
			},
			// 获取站点列表
			getStationList: function() {
				let params = '?current=' + this.stationSearch.current +
					'&size=' + this.stationSearch.size;
				if (this.stationSearch.keyword) {
					params += '&keyword=' + this.stationSearch.keyword
				}
				this.httpRequest({
					url: '/guiminSite/getStationList' + params,
					method: 'GET',
					fn: function(data) {
						console.log('唯一站点列表：', data)
						that.stationList = data.records;
						that.stationSearch.pages = data.pages
						that.stationSearch.total = data.total
						that.stationSearch.current = parseInt(data.current)
						that.stationSearch.size = parseInt(data.size)
					}
				})
			}
		},
		onLoad: function() {
			that = this;
			this.getAgentList()
		}
	}
</script>
